<template>
  <div>
    <h1>代办事项</h1>
    <div class="common-layout">
      <el-container>
        <el-header><SonHeader @add="addHand"></SonHeader></el-header>
        <el-main
          ><SonMain
            :list="currentList"
            @finish="changeDad"
            @handleDelete="del"
            @cancer="cancerDad"
          ></SonMain
        ></el-main>
        <el-footer><SonFooter :list="list" @show="show" /></el-footer>
      </el-container>
    </div>
  </div>
  <div style="text-align: center; margin-top: 20px">
    <el-pagination
      style="display: flex; justify-content: center"
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="list.length"
      layout="prev, pager, next"
    />
  </div>
</template>

<script>
import SonFooter from "@/components/ToDo/SonFooter.vue";
import SonHeader from "@/components/ToDo/SonHeader.vue";
import SonMain from "@/components/ToDo/SonMain.vue";

export default {
  components: {
    SonHeader,
    SonFooter,
    SonMain,
  },
  data() {
    return {
      list: [
        {
          id: "001",
          content: "学习第一章",
          state: false,
          stateDate: "2024-9-10",
          finishDate: "",
        },
        {
          id: "002",
          content: "学习第二章",
          state: false,
          stateDate: "2024-10-10",
          finishDate: "",
        },
      ],
      now: new Date(),
      copyList: [],
      currentPage: 1,
      pageSize: 5,
    };
  },
  created() {
    this.copyList = this.list.slice();
  },
  methods: {
    addHand(val) {
      this.list.push({
        id: +new Date(),
        content: val,
        state: false,
        stateDate: this.fomateDate,
        finishDate: "",
      });
      this.copyList = this.list.slice();
    },
    del(i) {
      this.list.splice(i, 1);
    },
    changeDad(i) {
      this.list[i].finishDate = this.fomateDate;
      this.copyList = this.list.slice();
    },
    cancerDad(i) {
      this.list[i].state = false;
      this.copyList = this.list.slice();
    },
    show(flag) {
      if (flag == "clear") {
        this.list = [];
        this.copyList = [];
      } else if (flag == "done") {
        this.list = this.copyList.filter((v) => v.state == true);
      } else if (flag == "undo") {
        this.list = this.copyList.filter((v) => v.state == false);
      } else {
        this.list = this.copyList.slice();
      }
    },
    handlePageChange(page) {
      this.currentPage = page;
    },
  },
  computed: {
    fomateDate() {
      let month = this.now.getMonth() + 1;
      return this.now.getFullYear() + "-" + month + "-" + this.now.getDate();
    },
    currentList() {
      let start = (this.currentPage - 1) * this.pageSize;
      let end = this.currentPage * this.pageSize;
      return this.list.slice(start, end);
    },
  },
};
</script>

<style>
#app {
  width: 800px;
  margin: auto;
}
</style>
